<!DOCTYPE html>
<html>
    <header>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <title>
            注册-上传身份信息
        </title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    
        </script>
        <link href="./css/layui.css" rel="stylesheet" />
        <!-- 引入 layui.js -->
        <script src="./js/layui.js"></script>
        <script src="./js/utils.js"></script>
        <script src="./js/constant.js" ></script>
        <script src="./js/data.js"></script>
        <script src="./js/userAuth.js"></script>
        <script src="./js/request.js"></script>
        <script type="text/javascript">
            
            $(document).ready(()=>{


                // init(false,true);
                whiteListPage();
                const registerInfo = getRegisterInfo();
                const {idCardFrontLocalUrl,idCardBackLocalUrl} = registerInfo;
                if(idCardFrontLocalUrl){
                    $("#id-card-front").attr("src",idCardFrontLocalUrl)
                }
                if(idCardBackLocalUrl){
                    $("#id-card-back").attr("src",idCardBackLocalUrl)
                }


                $("#next").click(function(){
                    const info = getRegisterInfo();
                    if(!info || !info.idCardFront ||!info.idCardBack){
                        layer.msg("请先上传身份证正反面")
                        return ;
                    }
                    // location.href="register-2-edit-info.html"
                    window.open(REGISTER_2)
                })
                
                var upload = layui.upload;
                var li ;
                upload.render({
                    elem:"#idcard-front",
                    url : "/api/wechat/UploadHouseholdMap",
                    choose:function({pushFile}){
                        li = layer.load();
                        const files = pushFile();
                       const fileKeys = Object.keys(files);
                       const file = files[fileKeys[0]];
                        const form = new FormData();
                        form.append("file",file);
                        $.ajax({
                            url : "https://ssl.zhuanyegou.com/fileServer/ocr/idCard",
                            data : form,
                            type:"post",
                            processData:false,
                            contentType: false,
                            success:function(r,t,x){
                                try{
                                    const d = JSON.parse(r.data);
                                    setRegisterInfo("faceData",d);
                                }catch(err){
                                    layer.msg("解析身份证失败："+err)
                                }
                                
                            },error:function(){
                                console.log(arguments)
                            }
                        })
                    },
                    done: function(r,t,x){
                        layer.close(li)
                        layer.msg(r.message);
                        if(r.code == 200){

                            const resp = r.list.replace(",","");
                            const localUrl = getTmpImgUrl(resp);
                            $("#id-card-front").attr("src",localUrl);
                            setRegisterInfo("idCardFrontLocalUrl",localUrl);
                            setRegisterInfo("idCardFront",resp)
                        }
                    }
                })
                upload.render({
                    elem:"#idcard-back",
                    url : "/api/wechat/UploadHouseholdMap",
                    choose:function(){
                        li = layer.load();
                    },
                    done: function(r,t,x){
                        layer.close(li)
                        layer.msg(r.message);
                        if(r.code == 200){
                            const resp = r.list.replace(",","");
                            const localUrl = getTmpImgUrl(resp);
                            setRegisterInfo("idCardBack",resp)
                            $("#id-card-back").attr("src",localUrl);
                            setRegisterInfo("idCardBackLocalUrl",localUrl);
                        }
                    }
                })
            })
        </script>
        <style>
            /* 步骤条样式 */
            .steps {
                /* width:  100%; */
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0px 20px;
                margin-top: 20px;
            }
            .active-title {
                color:rgb(231, 85, 72);
            }
            .disactive-title {
                color: grey;
            }
            .line {
                height: 1px;
                /* background-color: rgb(220,220,220); */
                background-color: grey;
                display: flex;
                flex:1;
            }

            .header {
                text-align: center;
                padding: 20px;
                font-size: 18px;
                color: grey;
            }
            .idcard {
                /* max-width: 400px; */
                width: 100%;
                position: relative;
                /* height: calc(100vw / 2); */
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            .idcard img {
                width: 100%;
            }
            #id-card-front,#id-card-back{
                width: 90%;
                border-radius: 10px;
                padding-bottom: 20px;
            }
        </style>
    </header>
    <body>

         <!-- 步骤条 -->
	<div class="steps">
       <div class="active-title">
        上传资料
       </div>
       <div class="line">

       </div>
       <div class="disactive-title">
        填写信息
       </div>
       <div class="line">
        
        </div>
       <div class="disactive-title">
        授权公司
       </div>
   </div>

   <div class="header">
    请上传身份证正反面图像
   </div>

   <div class="idcard" id="idcard-front">
        <img src="./static/id-front.jpg" id="id-card-front"/>
        <div style="position: absolute;background-color:rgb(231, 85, 72); width:40px;height: 40px;border-radius: 20px;display: flex;align-items: center;justify-content: center;">
            <img src="./static/icon_takephoto.png" style="width:30px;height:30px"/>
        </div>
        <!-- <img src="" style="position: absolute;width: 100%;height: 100%;" id="id-card-front"/> -->
   </div>

   <div class="idcard" id="idcard-back">
    <img src="./static/id-back.jpg" id="id-card-back"/>
    <div style="position: absolute;background-color:rgb(231, 85, 72); width:40px;height: 40px;border-radius: 20px;display: flex;align-items: center;justify-content: center;">
        <img src="./static/icon_takephoto.png" style="width:30px;height:30px"/>
    </div>
</div>

<div id="next" style="position:fixed;width:100%;height:50px;left:0px;bottom:0px;text-align: center;line-height: 50px;background-color: rgb(231, 85, 72);color:white">
    下一步
</div>
    </body>
</html>